<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>智能门禁系统管理平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/thesame.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/headCss.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/leftSidebar.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/rightCon.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/popCss.css}" media="all">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo green fb">智能门禁系统管理平台</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;"><img src="img/tx.png" th:src="@{/static/img/tx.png}" class="layui-nav-img">[[${userName}]]</a>
                <dl class="layui-nav-child cursor">
                    <dd>
                        <span onclick="layerOpen()">修改密码</span>
                    </dd>
                    <dd>
                        <a th:href="@{/outLogin}">退出登录</a>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
    <div class="layui-side">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree layui-nav-tree-orgincon menus" lay-filter="test">


                <li class="layui-nav-item" th:each="menu : ${menus}">
                    <a th:data-id="@{${#strings.isEmpty(menu.url)} ? |#| : ${menu.url}}" th:class="${#lists.isEmpty(menu.children)} ? |menuItem| : ''"><img th:src="@{/static/img/{filename}(filename=${menu.icon})}">[[${menu.menuName}]]</a>
                    <dl class="layui-nav-child" th:if="${not #lists.isEmpty(menu.children)}">
                        <dd class="layui-this" th:each="cmenu : ${menu.children}">
                            <a th:data-id="@{${#strings.isEmpty(cmenu.url)} ? |#| : ${cmenu.url}}" th:class="${#lists.isEmpty(cmenu.children)} ? |menuItem| : ''">[[${cmenu.menuName}]]</a>
                        </dd>
                    </dl>
                </li>

            </ul>
        </div>
    </div>
    <div class="layui-body mainContent">
        <!-- 内容主体区域 -->
        <iframe th:src="@{/welcome}" class="menjin_iframe" style="overflow: visible; border: none" width="100%" height="100%" scrolling="no" marginheight="0" marginwidth="0"></iframe>
    </div>
</div>


<div id="pop-con">
    <div class="pop-up">
        <!-- 停用提示 -->
        <!-- <div class="reset-con">
            <div>
                <div class="f16px"><img src="img/icon_stop.png">停用</div>
                <p>确认要停用此用户吗？</p>
            </div>
            <div class="btn-con textCenter">
                <span class="btn-cancel">取&nbsp;消</span>
                <span class="btn-submit">提&nbsp;交</span>
            </div>
        </div> -->
        <!-- 重置密码 -->
        <!-- <div class="reset-con">
            <div>
                <div class="f16px"><img src="img/icon_reset.png">重置密码</div>
                <p>是否要重置为初始密码123456？</p>
            </div>
            <div class="btn-con textCenter">
                <span class="btn-cancel">取&nbsp;消</span>
                <span class="btn-submit">提&nbsp;交</span>
            </div>
        </div> -->
        <!-- 修改密码 -->
        <div class="amend-con form-style">
            <div class="pop-title relative overflow mb15px">
                <span class="ml15px f16px">修改密码</span>
                <p class="right"><img th:src="@{/static/img/icon_close.png}" class="block pop-close">
                <p>
            </div>
            <div class="pop-form mt30px mb30px">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="red">*</span>新密码：</label>
                    <div class="layui-input-block">
                        <input type="password" id="pwd" maxlength="18" placeholder="请输入">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="red">*</span>确认密码：</label>
                    <div class="layui-input-block">
                        <input type="password" maxlength="18" id="pwd2" placeholder="请输入">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block gray">密码应至少6位，且为大小写字母、数字和字符中至少两类的组合</div>
                </div>
            </div>
            <div class="btn-con textCenter">
                <span class="btn-cancel pop-close">取&nbsp;消</span>
                <span class="btn-submit" onclick="updatePwd()">提&nbsp;交</span>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-3.1.1.min.js" th:src="@{/static/js/jquery-3.1.1.min.js}" charset="utf-8"></script>
<script src="layui/layui.js" th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script src="js/leftSidebar.js" th:src="@{/static/js/leftSidebar.js}" charset="utf-8"></script>
<script th:inline="javascript">

    var basePath = [[${#request.getContextPath()}]];

    $(function () {
        $(".menus li .menuItem").on('click', moli);
    });

    function moli() {
        var flag = true;
        var url = $(this).attr('data-id');
        console.log(url);

        //菜单是否点过
        if (flag) {
            // 添加菜单对应的iframe
            var str = '<iframe src="' + url + '" class="menjin_iframe" style="overflow: visible; border: none" ' +
                'width="100%" height="100%" scrolling="no" marginheight="0" marginwidth="0"></iframe>'
            console.log(str);
            $('.mainContent').find('iframe.menjin_iframe').hide().parents('.mainContent').append(str);
        }
    };

    //左侧菜单栏
    layui.use('element', function () {
        var element = layui.element;
    });

    function layerOpen() {
        layui.use(['element', 'table', 'layer'], function () {
            var element = layui.element;
            var table = layui.table;
            var layer = layui.layer;
            //
            layer.open({
                type: 1
                , title: false //不显示标题栏
                , closeBtn: false
                //新建组织
                , area: ['$("div#pop-con") + width() + "px"', '']
                , shade: 0.6
                , id: 'payCons' //设定一个id，防止重复弹出
                /*,btn: ['确认支付']*/
                , btnAlign: 'c'
                , moveType: 1 //拖拽模式，0或者1
                , shadeClose: true //设置允许点遮罩关闭
                , content: $("div#pop-con"),
                success: function () {
                    //关闭弹层
                    $(".pop-close").click(function () {
                        layer.closeAll();
                    });
                },
            });
        })
    }

    function updatePwd() {
        layui.use(['element', 'table', 'layer'], function () {

            var layer = layui.layer;
            var pwdRegex = new RegExp('(?=.*[^a-zA-Z0-9]).{6,18}');
            var pwd = $("#pwd").val();
            var pwd2 = $("#pwd2").val();

            if (isNull(pwd)) {
                layer.msg("请输入密码")
                return;
            }

            if (isNull(pwd2)) {
                layer.msg("请输入确认密码")
                return;
            }

            if (!(pwd == pwd2)) {
                layer.msg("密码不一致")
                return;
            }

            /* if (!pwdRegex.test(pwd) || !pwdRegex.test(pwd2)) {
                 layer.msg("您的密码复杂度太低（密码中必须包含大小写字母、数字、特殊字符）")
                 return;
             }*/
            var data = {pwd: pwd};
            $.ajax({
                url: basePath + "/user/updatePwd",
                type: "post",
                async: false,
                data: data,
                dataType: "json",
                success: function (data) {
                    if (data.code == 200) {
                        layer.closeAll();
                        layer.msg(data.msg);
                    }
                }
            })

        })
    }

    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }
</script>
</body>
</html>
